<template>
<div class="main-wrapper">
  <div class="content-wrapper" v-if="enterpriseSearchResult.length !== 0">
    <div class="title">企业</div>
    <div>共找到{{ enterpriseSearchResult.length }}条结果</div>
    <GridLayout :items="enterpriseSearchResult" :gutter="0" :span="24">
      <template #item="{ ele }">
        <enterprise-ele :data />
      </template>
    </GridLayout>
<!--    <el-divider />-->
  </div>

  <div class="content-wrapper" v-if="positionSearchResult.length !== 0">
    <div class="title">岗位</div>
    <div>共找到{{ positionSearchResult.length }}条结果</div>
    <GridLayout :items="positionSearchResult" :gutter="0" :span="24">
      <template #item="{ ele }">
        <position-ele :data />
      </template>
    </GridLayout>
    <el-divider>再怎么找也没有了</el-divider>
  </div>
  <div v-else>
    <div>暂无岗位搜索结果</div>
  </div>
</div>


</template>

<script>
import GridLayout from "@/components/GridLayout.vue";
import PositionEle from "@/views/SearchView/PositionEle.vue";
import EnterpriseEle from "@/views/SearchView/EnterpriseEle.vue";

export default {
  name: "PositionSearchView",
  components: {EnterpriseEle, PositionEle, GridLayout},
  data() {
    return {
      enterpriseSearchResult: Array(5),
      positionSearchResult: Array(15)
    };
  }
}
</script>

<style scoped>
.main-wrapper {
  background-color: var(--color-light);
  /*background-color: red;*/
  padding: 30px;
  display: flex;
  /*width: 100%;*/
  flex-direction: column;
  align-items: center;
  .content-wrapper {
    margin-bottom: 30px;
    width: 800px;
    background-color: white;
    padding: 10px 20px 20px 20px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    .title {
      font-weight: bold;
      font-size: var(--font-size-large);
    }
  }
}

</style>